<template>
  <div class="page-department">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>生成紧急扩容资料
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>
        </div>
      </div>
    </div>
    <div class="component-searchHeader">
      <div class="search-header">
        <div class="left-title">
          <p class="left-text"></p>
          <div class="right">
            <!-- <button @click="">下载</button> -->
          </div>
        </div>
      </div>
    </div>
    <div class="component-box">
      <!--<span class="iconfont">&#xe796;</span>-->
      <dl>
        <dt @click="$router.push({name:'tableOne',query:{proId:proId}})">
          <span class="iconfont">&#xe796;</span>
        </dt>
        <dd>表一 - 七级标准地址</dd>
      </dl>
      <dl>
        <dt @click="$router.push({name:'tableTwo',query:{proId:proId}})">
          <span class="iconfont">&#xe796;</span>
        </dt>
        <dd>表二 - 设备覆盖地址</dd>
      </dl>
      <dl>
        <dt @click="$router.push({name:'tableSecond',query:{proId:proId}})">
          <span class="iconfont">&#xe796;</span>
        </dt>
        <dd>表二 - GF覆盖地址表（二级光分）</dd>
      </dl>
      <dl>
        <dt @click="$router.push({name:'tableThree',query:{proId:proId}})">
          <span class="iconfont">&#xe796;</span>
        </dt>
        <dd>表三 - 分光器</dd>
      </dl>
      <dl>
        <dt @click="$router.push({name:'tableFour',query:{proId:proId}})">
          <span class="iconfont">&#xe796;</span>
        </dt>
        <dd>表四 - 标签配线表</dd>
      </dl>
      <dl>
        <dt @click="$router.push({name:'tableFive',query:{proId:proId}})">
          <span class="iconfont">&#xe796;</span>
        </dt>
        <dd>表五 - 配线箱体表</dd>
      </dl>
      <dl>
        <dt @click="piontPhoto">
          <span class="iconfont">&#xe640;</span>
        </dt>
        <dd>现场打点截图</dd>
      </dl>
    </div>
    <div class="component-box">
      <dl>
        <dt @click="$router.push({name:'tableSubOne',query:{proId:proId}})">
          <span class="iconfont">&#xe796;</span>
        </dt>
        <dd>工作量确认表</dd>
      </dl>
      <dl>
        <dt @click="$router.push({name:'tableSubTwo',query:{proId:proId}})">
          <span class="iconfont">&#xe796;</span>
        </dt>
        <dd>材料使用表</dd>
      </dl>
      <dl>
        <dt @click="$router.push({name:'tableSubThree',query:{proId:proId}})">
          <span class="iconfont">&#xe796;</span>
        </dt>
        <dd>主要工程量统计表</dd>
      </dl>
      <dl>
        <dt @click="$router.push({name:'finishPhoto',query:{proId:proId}})">
          <span class="iconfont">&#xe640;</span>
        </dt>
        <dd>完工照片</dd>
      </dl>
    </div>

    <!-- 照片弹窗列表 -->
    <div class="component-model">
      <el-dialog title="照片列表" :visible.sync="photoFlag" width="1140px">
        <div class="input-box">
          <div class="checkbox">
            <el-table
              ref="multipleTable"
              :data="photoList"
              tooltip-effect="dark"
              style="width:100%"
              border
            >
              <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
              <el-table-column label="照片名称" align="center" width="300" prop="fileName"></el-table-column>
              <el-table-column label="点击预览" align="center" prop>
                <template slot-scope="scope">
                  <a
                    href="javaScript:;"
                    @click="openPhoto(scope.row.fileUrl)"
                    class="red"
                  >{{scope.row.fileName}}</a>
                </template>
              </el-table-column>
              <el-table-column label="点击下载" align="center" prop>
                <template slot-scope="scope">
                  <a
                    :href="dataImg_url + scope.row.fileUrl"
                    :download="scope.row.fileName"
                    class="red"
                  >{{scope.row.fileName}}</a>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="photoFlag = false">确定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 预览照片 -->
    <div class="component-model">
      <el-dialog title="预览照片" :visible.sync="checkPhoto" width="1140px">
        <div class="input-box">
          <div class="checkbox">
            <img :src="photoUrl" style="max-width:900px;margin:10px auto">
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="checkPhoto = false">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "productData",
  data() {
    return {
      proId: "",
      photoFlag: false,
      checkPhoto: false,
      photoList: [],
      photoUrl: "",
      dataImg_url: img_url
    };
  },
  created() {
    this.proId = this.$route.query.proId;
  },
  mounted() {},
  methods: {
    piontPhoto() {
      let that = this,
        suCb = res => {
          console.log(res);
          that.photoList = res.data.data||[];
          that.photoFlag = true;
        },
        erCb = res => {
          console.log(res);
        },
        req = {
          url: "/api/web/proProject/getFieldScreenshots",
          methods: "post",
          data: { 
            proId: that.$route.query.proId 
          },
          success: suCb,
          error: erCb
        };
      that.$https(req);
    },
    openPhoto(url){
      this.checkPhoto = true;
      this.photoUrl = this.dataImg_url + url;
    }
  }
};
</script>

<style scoped>
.component-mainHeader .top .topright {
  font-size: 24px;
}

.component-searchHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
}

.component-searchHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-searchHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  line-height: 45px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-searchHeader .right {
  width: 120px;
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}

.component-searchHeader .right button {
  width: 80px;
  padding: 0 15px;
  height: 30px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 12px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-searchHeader .right button:hover {
  background-color: #f3f3f3;
  cursor: pointer;
}

.component-box {
  display: flex;
  flex-wrap: wrap;
  width: 1100px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-top: none;
  margin: 0 auto;
  padding: 30px 50px;
}
.component-box dl {
  margin-right: 20px;
  margin-bottom: 30px;
  width: 234px;
}
.component-box dl:nth-of-type(4n) {
  margin-right: 0;
}
.component-box dl dt {
  width: 112px;
  height: 108px;
  background-color: rgba(242, 242, 242, 1);
  border-radius: 8px;
  margin: 10px auto;
  box-sizing: border-box;
  cursor: pointer;
}
.component-box dl dd {
  color: #666;
  font-size: 14px;
  text-align: center;
}
.component-box dl dt span {
  display: block;
  font-size: 60px;
  color: #1abc9c;
  line-height: 108px;
}
</style>
